<!-- 薪资排行 -->
<template>
	<view class="page">
		<!-- <u-navbar :is-back="false" title="完善资料"></u-navbar> -->
		<view class="form-box">
			<!-- <view class="avatar-box" @click="chooseImage">
				<view class="avatar">
					<u-avatar :src="form.avatar" size="200"></u-avatar>
					<view class="avatar-icon">
						<u-icon color="#fff" name="camera"></u-icon>
					</view>
				</view>
			</view> -->
			<u-button :custom-style="customStyle" :hair-line="false" @click="chooseImage">
				<view class="avatar">
					<u-avatar :src="form.avatar" size="200"></u-avatar>
					<view class="avatar-icon">
						<u-icon color="#fff" name="camera"></u-icon>
					</view>
				</view>
			</u-button>
			<u-form :model="form" ref="uForm" :label-style="labelStyle" label-width="120">
					<u-form-item label="昵称">
						<u-input @click="nickname" placeholder="去设置" disabled maxlength="30" input-align="right" v-model="form.nickName" />
					</u-form-item>
					<u-form-item label="微信号" v-if="form.isAuth == '1'">
						<u-input @click="wechatShow = true" placeholder="去设置" disabled maxlength="100" input-align="right" v-model="vuex_user.wechat" />
					</u-form-item>
					<u-form-item label="性别">
						<u-input @click="sexShow = true" placeholder="去设置" disabled maxlength="100" input-align="right" v-model="form.sexLabel" />
					</u-form-item>
					<u-popup v-model="wechatShow" mode="bottom" border-radius="14">
						<wechat-pop @cannel="wechatShow = false"></wechat-pop>
					</u-popup>
					<u-select v-model="sexShow" :list="sexList" @confirm="confirmSex"></u-select>
					<u-form-item label="生日">
						<u-input @click="birthDayShow = true" placeholder="去设置" disabled maxlength="100" input-align="right" v-model="form.birthdayLabel" />
					</u-form-item>
					<u-picker v-model="birthDayShow" start-year="1980" end-year="2006" mode="time" :default-time="form.birthdayLabel" @confirm="confirmBirth"></u-picker>
					<u-form-item label="签名">
						<u-input @click="signname" placeholder="去设置" disabled maxlength="100" input-align="right" v-model="form.signName" />
					</u-form-item>
					<!-- <u-form-item label="邀请码" v-if="chat_flag == 1">
						<u-input @click="inviteShow = true" placeholder="去设置" disabled maxlength="100" input-align="right" v-model="vuex_user.inviteCode" />
					</u-form-item> -->
					<u-popup v-model="inviteShow" mode="bottom" border-radius="14">
						<invite-code  @cannel="inviteShow = false"></invite-code>
					</u-popup>
			</u-form>
			<view class="btn-box">
				<u-button type="primary" @click="updateUser">完成</u-button>
			</view>
		</view>
		
		<user-phone @ok="ok"></user-phone>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import wechatPop from "@/pages/me/wechat.vue";	//微信号
	export default {
		components: {
			wechatPop,
		},
		data() {
			var token = 'Bearer ' + uni.getStorageSync('token');
			var action = this.website.baseUrl + '/system/user/profile/avatar';
			return {
				customStyle: {
					margin: '0',
					display: 'flex',
					justifyContent: 'center',
					alignItems: 'center',
					lineHeight: 'unset',
					height: 'unset',
					backgroundColor: 'unset',
					border: '0',
					padding: '20px',
				},
				tmplIds: [],
				form: {
					nickName: '',
					wechat: '',
					sex: '',
					signName: '',
					inviteCode: '',
					lon: '',
					lat: '',
					birthday: '',
					birthdayLabel: '',
					avatar: '',
					isAuth: '0',
				},
				inviteShow: false,
				wechatShow: false,
				birthDayShow: false,
				sexShow: false,
				sexList: [
					{
						value: '0',
						label: '男'
					},
					{
						value: '1',
						label: '女'
					}
				],
				formData: {},
				action: action,
				header: {
					'Authorization': token
				},
				labelStyle: {
					color: '#909399'
				},
			}
		},
		onLoad() {
			this.getUserInfo();
			var _this = this;
			uni.$on('nickName',function(e){
				_this.form.nickName = e;
			});
			uni.$on('signName',function(e){
				_this.form.signName = e;
			});
		},
		computed: {
			...mapState(['vuex_user']),
		},
		methods: {
			confirmSex(e) {
				this.form.sexLabel = e[0].label;
				this.form.sex = e[0].value;
			},
			confirmBirth(e) {
				this.form.birthdayLabel = e.year+'-'+e.month+'-'+e.day;
				var birthday = this.form.birthdayLabel+" 00:00:00";
				this.form.birthday = new Date(birthday);
			},
			getUserInfo() {
				this.$u.get('/system/user/getInfo').then(res => {
					var user = res.user;
					this.tmplIds = res.tmplIds;
					this.form.isAuth = user.isAuth;
					this.form.avatar = user.avatar;
					this.form.sex = user.sex;
					this.form.sexLabel = this.getDictLabel(this.sexList, this.form.sex);
					this.form.birthday = user.birthday;
					this.form.birthdayLabel = this.getDateLabel(this.form.birthday);
					this.form.nickName = user.nickName;
					this.form.signName = user.signName;
					if(this.form.signName == ''){
						this.form.signName = '这个人很懒，什么也没有留下';
					}
				})
			},
			ok() {
				this.updateProfile();
			},
			handerChooseLocation () {
			  uni.chooseLocation({
			    success: (res) => {
					this.updateLocation(res.latitude, res.longitude);
			    },
			    fail: function (err) {
			        console.log('取消按钮', err)
			    }
			  })
			},
			updateLocation(lat,lng) {
				this.$u.put('/system/user/profile',{
					lat: lat,
					lon: lng,
				}).then(res => {
					this.updateProfile();
				})
			},
			getDateLabel(dateStr) {
				if(dateStr == null){
					return '';
				}
				var date = new Date(dateStr);
				var y = date.getFullYear();//年
				var m = date.getMonth() + 1;//月
				var d = date.getDate();//日
				return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
			},
			getDictLabel(dictList, value) {
				for(var i=0;i<dictList.length;i++){
					var dict = dictList[i];
					if(dict.value == value){
						return dict.label;
					}
				}
			},
			nickname() {
				this.$u.route({
					url: 'packgeMine/pages/me/welcome/nickname',
				});
			},
			signname() {
				this.$u.route({
					url: 'packgeMine/pages/me/welcome/signname',
				});
			},
			updateUser() {
				if(this.form.avatar == 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/0'){
					uni.showToast({ title: '请上传头像', icon: 'none' });
					return;
				}
				if(this.form.nickName == '微信用户'){
					uni.showToast({ title: '请修改昵称', icon: 'none' });
					return;
				}
				if(this.form.isAuth == '1'){
					if(this.vuex_user.wechat == null || this.vuex_user.wechat == ''){
						uni.showToast({ title: '请填写微信号', icon: 'none' });
						return;
					}
				}
				if(this.form.sex == ''){
					uni.showToast({ title: '请设置性别', icon: 'none' });
					return;
				}
				if(this.form.birthday == null){
					uni.showToast({ title: '请设置生日', icon: 'none' });
					return;
				}
				
				this.test();
			},
			updateProfile() {
				this.$u.post('/system/user/profile/welcome',{
					sex: this.form.sex,
					birthday: this.form.birthday,
					signName: this.form.signName,
					isWelcome: 1,
				}).then(res => {
					uni.reLaunch({
					  url: '/pages/index/world/index'
					});
					/* if(this.vuex_login_to){
						uni.reLaunch({
						  url: '/pages/index/world/index'
						});
					}else{
						this.$u.vuex('vuex_login_to', true);
					} */
				})
			},
			updateAvatar(image) {
				uni.uploadFile({
					url: this.action,
					filePath: image.path,
					name: 'avatarfile',
					formData: this.formData,
					header: this.header,
					success: res => {
						var data = res.data;
						data = JSON.parse(data);
						if(data.code == 200){
							this.form.avatar = data.imgUrl;
							this.$refs.uToast.show({
								title: '上传成功',
								duration: 500,
							});
						}else{
							this.$refs.uToast.show({
								title: '上传失败',
								duration: 500,
							});
						}
					},
					fail: e => {
						this.$refs.uToast.show({
							title: '上传失败',
							duration: 500,
						});
					}
				});
			},
			//选照片 or 拍照
			chooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album', 'camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image) => {
									this.updateAvatar(image);
								}
							});
						}
					}
				});
			},
			onChooseAvatar(e) {
				uni.getImageInfo({
					src: e.detail.avatarUrl,
					success: (image) => {
						this.updateAvatar(image);
					}
				});
			},
			test() {
				var that = this;
				var tmplId = that.tmplIds[0];
				wx.getSetting({
				  withSubscriptions: true,
				  success(res) {
					console.log(res)
					if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
					  if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings[tmplId]) {
						let item = res.subscriptionsSetting.itemSettings[tmplId]
						if (item == "reject") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请打开通知管理里面的站内信提醒',
						  	showCancel: false,
						  	success: function(res) {
						  		uni.openSetting({
								  success(res) {
									console.log(res.authSetting)
								  },
								  fail(err) {
									console.error(err);
								  }
								});
						  	}
						  });
						} else if (item == "accept") {
						  that.subscribeMessage();
						} else if (item == "ban") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请在设置打开订阅消息开关',
						  	showCancel: false,
						  	success: function(res) {
						  		
						  	}
						  });
						}
					  }else{
						that.tipMsg();
					  }
					} else {
					  uni.showModal({
					  	title: '温馨提示',
					  	content: '请在设置打开通知管理开关',
					  	showCancel: false,
					  	success: function(res) {
					  		uni.openSetting({
							  success(res) {
								console.log(res.authSetting)
							  },
							  fail(err) {
								console.error(err);
							  }
							});
					  	}
					  });
					}
				  }
				});
			},
			tipMsg() {
				var that = this;
				uni.showModal({
					title: '温馨提示',
					content: '请勾选总是保持以上选择',
					showCancel: false,
					success: function(res) {
						that.subscribeMessage();
					}
				});
			},
			subscribeMessage() {
				var _this = this;
				uni.requestSubscribeMessage({
					//数组，最多放三个订阅模板的ID
					tmplIds: _this.tmplIds,
					success: function(res) {
						var code = res[_this.tmplIds[0]];
						if('reject' == code){
							_this.$u.toast('请点击允许订阅消息');
						}else{
							//_this.$store.commit('setPhone', true);
							_this.updateProfile();
						}
					},
					fail: function(res) {
						//_this.handerChooseLocation();
					},
					complete: (res) => {
						
					}
				});
			},
			back() { 
				this.$u.route({
					url: 'pages/index/world/index',
					params: {
						PageCur: 'me'
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}
	.slot-wrap {
		padding-left: 10px;
	}
	.form-box {
		padding: 0px 15px;
	}
	.avatar {
		position: relative;
	}
	.avatar-box {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px;
	}
	.avatar-icon {
		position: absolute;
		bottom: 20rpx;
		right: 0px;
		background: #303133;
		padding: 10rpx 12rpx;
		border-radius: 100px;
	}
	.btn-box{
		margin-top: 100rpx;
	}
</style>
